<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组织管理</title>
    <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../font/iconfont.css">
    <link rel="stylesheet" href="../../css/quanXianGuanLi/zuZhiGuanLi.css">
    <script src="../../lib/jquery/jquery-3.6.0.min.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../../javaScript/quanXianGuanLi/date.js"></script>
    <script src="../../javaScript/quanXianGuanLi/renYuanShuJu.js"></script>
    <script src="../../javaScript/quanXianGuanLi/accountDetails.js"></script>

    <style>

    </style>
</head>

<body>
    <div id="motaikuang">
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="setRole">新增组织</h4>
                    </div>
                    <div class="modal-body">
                        <div class="modal-body_content">
                            <div class=" row">
                                <div class="col-md-3 col-xs-3 row_right">
                                    <span class="xinghao">*</span><span>组织名称</span>
                                </div>
                                <div class="col-md-9 col-xs-9">
                                    <input type="password" placeholder="组织名称">

                                </div>
                            </div>
                            <div class=" row">
                                <div class="col-md-3 col-xs-3 row_right">
                                    <span>联系人</span>
                                </div>
                                <div class="col-md-9 col-xs-9">
                                    <input type="text" placeholder="联系人">
                                </div>
                            </div>
                            <div class=" row">
                                <div class="col-md-3 col-xs-3 row_right">
                                    <span>手机号</span>
                                </div>
                                <div class="col-md-9 col-xs-9">
                                    <input type="text" placeholder="11为数字的手机号">
                                </div>
                            </div>
                            <div class=" row">
                                <div class="col-md-3 col-xs-3 row_right">
                                    当前状态
                                </div>
                                <div class="col-md-9 col-xs-9">
                                    <span class="iconfont icon-anniu_kaiqi"></span><span class="iconfont icon-anniu_guanbi"></span>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary password_sure">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container nav_header">
        <div class="row">
            <div class="col-md-10 col-xs-10">
                <div class="row">
                    <div class="col-md-3 col-xs-3">
                        所属组织
                        <select class="drop_down" id="drop_down_one">
                    <option value="">请选择组织</option>
                    <option value="运营部">运营部</option>
                    <option value="市场部">市场部</option>
                    <option value="产品部">产品部</option>
                    <option value="技术部">技术部</option>
                    <option value="设计部">设计部</option>
                    <option value="测试部">测试部</option>
                    <option value="财务部">财务部</option>
                    <option value="人事部">人事部</option>
                    <option value="客服部">客服部</option>
                        </select>
                    </div>
                    <div class="col-md-3 col-xs-3">
                        当前状态
                        <select class="drop_down" id="drop_down_two">
                    <option value="">请选择组织</option>
                    <option value="启用">启用</option>
                    <option value="禁用">禁用</option>
                        </select>
                    </div>
                    <div class="col-md-3 col-xs-3">
                        更新时间
                        <input type="date" class="drop_down" value="" id="drop_down_three">
                    </div>
                    <div class="col-md-3 col-xs-3">
                        联系人
                        <input type="text" placeholder="联系人" class="drop_down" value="" id="drop_down_four">
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-xs-2 content_right">
                <button class="sousuo"><span class="iconfont icon-sousuo"></span>搜索</button>
                <button class="chongzhi"><span class="iconfont icon-zhongzhizhongzhi"></span>重置</button>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-xs-10">
                <div class="row">
                    <div class="col-md-1 col-xs-1">
                        <span class="iconfont icon-shujukuliebiao"></span>数据列表
                    </div>
                    <div class="col-md-1 col-xs-1">
                        <button class="shanchu"><span class="iconfont icon-shanchu"></span>删除</button>
                    </div>
                </div>
            </div>
            <div class="col-md-2 content_right"> <button type="button" class="btn btn-primary btn-lg xinzeng" data-toggle="modal" data-target="#myModal"><span>+ </span>新增</button></div>
        </div>
        <table class="table table-striped">
            <thead>
                <tr class="table_row">
                    <th>
                        <input type="checkbox" class="quanxuan" value="">
                    </th>
                    <th>序号</th>
                    <th>组织名称</th>
                    <th>联系人</th>
                    <th>手机号</th>
                    <th>更新时间</th>
                    <th>当前状态</th>
                    <th>操作</th>
                    <th>查看详情</th>
                </tr>
            </thead>
            <tbody class="table_row table_content">

            </tbody>
        </table>
        <div class="row table_page">
            <div class="col-md-8 col-xs-8"> <input type="checkbox" class="quanxuan" value="">&nbsp&nbsp全选</div>
            <nav aria-label="Page navigation" class="col-md-3 col-xs-3 page_nav">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="col-md-1 col-xs-1 page_num">
                <ul>
                    <li data-num="10" class="page_data">10条/页<span class="iconfont icon-arrow-down"></span></li>
                    <li data-num="15" class="page_data">15条/页</li>
                    <li data-num="20" class="page_data">20条/页</li>
                    <li data-num="25" class="page_data">25条/页</li>
                </ul>
            </div>
        </div>
    </div>
    <script src="../../javaScript/quanXianGuanLi/zuZhiGuanLi.js"></script>
    <script>
        let organization //获取选择的组织
        $('#drop_down_one').on('click', $('option'), function() {
            organization = $(this)
        })

        let atState //获取选择的状态
        $('#drop_down_two').on('click', $('option'), function() {
            atState = $(this)
        })

        let characterName //获取输入的角色名称
        $('#drop_down_three').on('click', $('option'), function() {
            characterName = $(this)
        })

        let creator //获取输入的联系人
        $('#drop_down_four').on('focusout', $('option'), function() {
            creator = $(this)
        })

        $('.sousuo').click(function() { //查找
            pagingData = accountData
            let sousuoData
            if (organization != undefined) {
                sousuoData = pagingData.filter(item => item.org == organization.val())
                pagingData = sousuoData
            }
            if (atState != undefined) {
                sousuoData = pagingData.filter(item => item.state == atState.val())
                pagingData = sousuoData
            }
            if (characterName != undefined) {
                sousuoData = pagingData.filter(item => item.time == characterName.val())
                pagingData = sousuoData
            }
            if (creator != undefined) {
                sousuoData = pagingData.filter(item => item.name == creator.val())
                pagingData = sousuoData
            }
            paging(1, pagingData, disPage)
        })

        $('.chongzhi').click(function() { //重置查找
            pagingData = accountData
            if (organization != undefined) {
                organization.html(`
                    <option value="">请选择组织</option>
                    <option value="运营部">运营部</option>
                    <option value="市场部">市场部</option>
                    <option value="产品部">产品部</option>
                    <option value="技术部">技术部</option>
                    <option value="设计部">设计部</option>
                    <option value="测试部">测试部</option>
                    <option value="财务部">财务部</option>
                    <option value="人事部">人事部</option>
                    <option value="客服部">客服部</option>
                `)
                organization = undefined
            }
            if (atState != undefined) {
                atState.html(`  
                    <option value="">请选择组织</option>
                    <option value="启用">启用</option>
                    <option value="禁用">禁用</option>`)
                atState = undefined
            }
            if (characterName != undefined) {
                characterName.val('')
                characterName = undefined
            }
            if (creator != undefined) {
                creator.val('')
                creator = undefined
            }
            paging(1, pagingData, disPage)
        })
    </script>
    <script src="../../javaScript/quanXianGuanLi/anNiu.js"></script>
</body>

</html>